<template>
	<view>
		<view class="detail">
			<icon type="error" color="#EC544F" size="50" v-if="false"></icon>
			<icon type="success" color="#19BE6B" size="50" v-else></icon>
			<view class="text">
				<view class="big">
					实付款￥{{option.cost}}
					<text v-if="false">应付款￥{{option.cost}}</text>
				</view>
				<view class="small">
					请等待商家配送
				</view>
			</view>
			<view class="complete" v-if="true">
				已完成
			</view>
		</view>
		<view class="Info" v-if="true">
			<view class="delivery">
				<view class="btn">
					<u-icon name="bag" color="#fff" size="22"></u-icon>
					<text>商家外送</text>
				</view>
			</view>
			<view class="viewOut">
				<view class="title">订单信息</view>
				<view class="body">
					<view class="row">订单编号:{{option.id}}</view>
					<view class="row">下单时间:{{option.time}}</view>
					<view class="row">支付方式:{{option.way}}</view>
				</view>
			</view>
			<view class="viewOut">
				<view class="title">收货地址</view>
				<view class="body">
					<view class="row">{{option.address.content}}</view>
					<view class="row">{{option.address.hostname}}-{{option.address.hostphone}}</view>
				</view>
			</view>
		</view>
		<view class="Info" v-else>
			<view class="delivery other">
				<view class="btn">
					<u-icon name="map" color="#fff" size="26"></u-icon>
					<text>到店自提</text>
				</view>
				<view class="time">6.30</view>
			</view>
			<view class="viewOut">
				<view class="title">订单信息</view>
				<view class="body">
					<view class="row">订单编号：山东省青岛市黄岛区长江西路66号</view>
					<view class="row">下单时间：王涛-15346781662</view>
					<view class="row">支付方式：微信支付</view>
				</view>
			</view>
			<view class="viewOut">
				<view class="title">自提地址</view>
				<view class="body">
					<view class="row">山东省青岛市黄岛区长江西路66号
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="row">商家电话-15346781662</view>
				</view>
			</view>
		</view>
		<view class="goodsList">
			<goodsList :item="dataList"></goodsList>
		</view>
	</view>

</template>

<script>
	import {
		timeInterval
	} from "@/utils/tool.js";
	export default {
		data() {
			return {
				option: {
					id: "",
					address: {
						hostname: "",
						content: "",
						hostphone: ""
					},
					time: "",
					way: "",
					cost: ""
				},
				dataList: {
					carList: [],
					totalPrice: 0,
					buyNum: 0,
					cheap: 0
				}
			};
		},
		onLoad(e) { //接收navigateTo的参数
			// console.log(e);
			this.getData(e.id);

		},
		methods: {
			getData(index) {
				uni.request({
					url: this.$e.Url + "/order/userGet",
					data: {
						id: index
					},
					header: {
						"Content-Type": "application/json"
					},
					method: 'GET',
					success: (res) => {
						console.log("请求APi接口【/order/userGet】", res);
						this.option = res.data;
						this.option.content = JSON.parse(this.option.content);
						this.option.time = timeInterval(this.option.time);
						this.option.way = (this.option.way == 'alipay' ? '支付宝支付' : '微信支付');
						this.dataList.buyNum = res.data.goodnum;
						this.dataList.totalPrice = res.data.cost;
						this.dataList.carList = this.option.content.carList;
						this.dataList.cheap = res.data.content.cheap;
						// console.log("option=", this.option);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	.detail {
		@include flex-box-set(start);
		padding: 30rpx;
		position: relative;

		.text {
			padding: 0 0 0 20rpx;

			.big {
				font-family: "Times New Roman", "微软雅黑";
				font-size: 44rpx;
				font-weight: bold;
			}

			.small {
				font-size: 28rpx;
				color: $text-font-color-2;
			}
		}

		.complete {
			font-size: 35rpx;
			color: $text-font-color-3;
			font-weight: bold;
			font-family: "微软雅黑";
			border: 6rpx solid $text-font-color-3;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			@include flex-box-set();
			position: absolute;
			right: 100rpx;
			top: 80rpx;
			transform: rotate(-20deg);

			&::after {
				// display: block;
				content: "";
				border: 2rpx solid $text-font-color-3;
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				transform: scale(0.9);
				box-sizing: border-box; //padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里
			}
		}
	}

	.Info {
		box-shadow: 0 0 10rpx 10rpx rgba(225, 232, 239, 0.3);
		background: #fff;
		padding: 30rpx 20rpx;
		border-radius: 30rpx 30rpx 0 0;

		.delivery {
			@include flex-box();

			.btn {
				@include flex-box-set();
				width: 200rpx;
				padding: 2rpx;
				height: 60rpx;
				background: #19BE6B;
				color: #fff;
				border-radius: 20rpx;

				text {
					font-size: 34rpx;
				}
			}

			&.other {
				.btn {
					background: #ff9100;
				}

				.time {
					font-size: 32rpx;
					color: $text-font-color-2;
				}
			}

			.time {}
		}

		.viewOut {
			padding: 30rpx 0;

			.title {
				font-size: 35rpx;
				font-weight: bold;
				font-family: "微软雅黑";
			}

			.body {
				.row {
					font-size: 30rpx;
					padding: 15rpx 0;
					color: $text-font-color-2;
					@include flex-box();
				}
			}
		}
	}

	.goodsList {
		box-shadow: 0 0 10rpx 10rpx rgba(225, 232, 239, 0.3);
		border-radius: 0 0 30rpx 30rpx;
		margin: 5rpx 0 0 0;
	}
</style>
